<template>
    <div class="goods-comment">
        <div class="head">
            <div class="data">
                <p><span>{{ commentInfo.salesCount }}</span><span>人购买</span></p>
                <p><span>{{ commentInfo.praisePercent }}%</span><span>好评率</span></p>
            </div>
            <div class="tags">
                <div class="dt">大家都在说：</div>
                <div class="dd">
                    <!-- <a href="javascript:;" class="active">全部评价（1000）</a> -->
                    <a href="javascript:;" :class="{ active: currTag === i }" v-for="(item, i) in tag" @click="handleClick(item, i)"
                        :key="item.title">{{ item.title }}({{ item.tagCount }})</a>
                </div>
            </div>
        </div>
        <div class="sort">
            <span>排序：</span>
            <a href="javascript:;" :class="{active: currActive===null}" @click="handleSort(null)">默认</a>
            <a href="javascript:;" :class="{active: currActive==='praiseCount'}" @click="handleSort('praiseCount')">最新</a>
            <a href="javascript:;" :class="{active: currActive==='createTime'}" @click="handleSort('createTime')">最热</a>
        </div>
        <!-- 列表 -->
        <div class="list">
            <div class="item" v-for="item in comment.items" :key="item.id">
                <div class="user">
                    <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/avatar_1.png" alt="">
                    <span>兔****m</span>
                </div>
                <div class="body">
                    <div class="score">
                        <i class="iconfont icon-wjx01" v-for="i in item.score" :key="i"></i>
                        <i class="iconfont icon-wjx01" v-for="i in (5-item.score)" :key="i"></i>
                        <span class="attr">颜色：黑色 尺码：M</span>
                    </div>
                    <div class="text">{{item.content}}</div>
                    <div class="time">
                        <span>{{item.createTime}}</span>
                        <span class="zan"><i class="iconfont icon-dianzan"></i>{{item.praiseCount}}</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <Pagination :params="comment"/>
        </div>
    </div>
</template>
<script setup>
import { getCommentInfo, getCommentList } from '@/api/product'
import {  onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router'

const route = useRoute()
let commentInfo = reactive({})
const currTag = ref(0)
const currActive = ref(null)
const tag = ref([])
let comment = reactive({})
// 筛选条件准备
const reqParams = reactive({
    page: 1,
    pageSize: 10,
    hasPicture: null,
    tag: null,
    sortField: null
})
const handleClick = (item, i) => {
    currTag.value = i
    if(item.type){
        item.type === 'all' ? (
            reqParams.hasPicture = null,
            reqParams.tag = null
        ) : (
            reqParams.hasPicture = true,
            reqParams.tag = null
        )
    }else{
        reqParams.hasPicture = null
        reqParams.tag = item.title
    }
    
    reqParams.page = 1
    getList()
}
const handleSort = (val) => {
    currActive.value = val
    reqParams.sortField = val
    getList()
}

const getList = async () => {
    const {result: res} = await getCommentList(route.params.id, reqParams)
    comment = Object.assign(comment, res)
}
onMounted(async () => {
    const { result } = await getCommentInfo(route.params.id)
    commentInfo = Object.assign(commentInfo, result)

    tag.value.push({ type: 'all', title: '全部评价', tagCount: commentInfo.evaluateCount })
    tag.value.push({ type: 'img', title: '有图', tagCount: commentInfo.hasPictureCount })
    commentInfo.tags.forEach(item => tag.value.push(item))

    getList()
})
</script>
  <style scoped lang="scss">
  .goods-comment {
      .head {
          display: flex;
          padding: 30px 0;
  
          .data {
              width: 340px;
              display: flex;
              padding: 20px;
  
              p {
                  flex: 1;
                  text-align: center;
  
                  span {
                      display: block;
  
                      &:first-child {
                          font-size: 32px;
                          color: $priceColor;
                      }
  
                      &:last-child {
                          color: #999;
                      }
                  }
              }
          }
  
          .tags {
              flex: 1;
              display: flex;
              border-left: 1px solid #f5f5f5;
  
              .dt {
                  font-weight: bold;
                  width: 100px;
                  text-align: right;
                  line-height: 42px;
              }
  
              .dd {
                  flex: 1;
                  display: flex;
                  flex-wrap: wrap;
  
                  >a {
                      width: 132px;
                      height: 42px;
                      margin-left: 20px;
                      margin-bottom: 20px;
                      border-radius: 4px;
                      border: 1px solid #e4e4e4;
                      background: #f5f5f5;
                      color: #999;
                      text-align: center;
                      line-height: 40px;
  
                      &:hover {
                          border-color: $mainColor;
                          background: lighten($mainColor, 50%);
                          color: $mainColor;
                      }
  
                      &.active {
                          border-color: $mainColor;
                          background: $mainColor;
                          color: #fff;
                      }
                  }
              }
          }
      }
  
      .sort {
          height: 60px;
          line-height: 60px;
          border-top: 1px solid #f5f5f5;
          border-bottom: 1px solid #f5f5f5;
          margin: 0 20px;
          color: #666;
  
          >span {
              margin-left: 20px;
          }
  
          >a {
              margin-left: 30px;
  
              &.active,
              &:hover {
                  color: $mainColor;
              }
          }
      }
  
      .list {
          padding: 0 20px;
  
          .item {
              display: flex;
              padding: 25px 10px;
              border-bottom: 1px solid #f5f5f5;
  
              .user {
                  width: 160px;
  
                  img {
                      width: 40px;
                      height: 40px;
                      border-radius: 50%;
                      overflow: hidden;
                  }
  
                  span {
                      padding-left: 10px;
                      color: #666;
                  }
              }
  
              .body {
                  flex: 1;
  
                  .score {
                      line-height: 40px;
  
                      .iconfont {
                          color: #ff9240;
                          padding-right: 3px;
                      }
  
                      .attr {
                          padding-left: 10px;
                          color: #666;
                      }
                  }
              }
  
              .text {
                  color: #666;
                  line-height: 24px;
              }
  
              .time {
                  color: #999;
                  display: flex;
                  justify-content: space-between;
                  margin-top: 5px;
              }
          }
      }
  }
  </style>